<template>
  <div class="box">

   
        <el-button class="add-btn" size="mini" @click="dialoger = true">新增</el-button>
  

    <div class="tag-list">
        <el-table
    :data="tags"
    border
    size = 'small'
    style="width: 100% ">
    <el-table-column
      fixed
      prop="id"
      label="id"
      
     >
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      >
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="data=scope.row,isChange = true ,dialoger = true" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table> 


    </div>
    <el-dialog
      append-to-body
      class="dialog"
      :title="isChange ? '修改分类' : '添加分类'"
      :visible.sync="dialoger"
    >
      <span style="margin-left: 1vw;">name:</span>
      <el-input v-model="data.name"></el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoger = false">取 消</el-button>
        <el-button type="primary" @click="addTag()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialoger: false,
      data: {
        id:'',
        name:''
      },
      isChange: false,
      tags:[]
    };
  },
  methods: {
    async addTag() {
   
      const { data: res } = this.isChange
        ? await this.$http.put("/tags", this.data)
        : await this.$http.post("/tags", this.data);
      if (res.code == 200) {
        this.$msg.fail("成功");
      }
      this.dialoger = false;
      this.isChange = false ;
    },
    async getTags() {
        const { data: res } = await this.$http.get("/tags")
        if(res.code == 200) {
            this.tags = res.data
        }
    },
  },
  created() {
    this.getTags();
  },
};
</script>

<style scoped>
.box{
    width: 100%;
    
}
.tag-list {
  height: 85vh; 
}
.add-btn {

    border:2px solid black ;
    margin-bottom: 1vh;
    
}
.dialog {
  width: 40vw;
  margin: auto;
}
</style>